@for $i from -30 through 30 {
  .mar-#{$i} { margin: $i+px; }
  .mar-t-#{$i} { margin-top: $i+px; }
  .mar-b-#{$i} { margin-bottom: $i+px; }
  .mar-l-#{$i} { margin-left: $i+px; }
  .mar-r-#{$i} { margin-right: $i+px; }
 
  .pad-#{$i} { padding: $i+px; }
  .pad-t-#{$i} { padding-top: $i+px; }
  .pad-b-#{$i} { padding-bottom: $i+px; }
  .pad-l-#{$i} { padding-left: $i+px; }
  .pad-r-#{$i} { padding-right: $i+px; }  
}

@for $t from 1 through 36 { 
  .font-#{$t} { font-size: $t+px; }
}

@for $w from 1 through 100 { 
  .width-#{$w} { width: $w+px; }
}

@for $h from 1 through 100 { 
  .height-#{$h} { height: $h+px; }
}